<template>
  <div id="app">
    <el-container>
      <el-header>
        <el-row :gutter="24">
          <el-col :span="4">logo</el-col>
          <el-col :span="17">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1">输血管理</el-menu-item>
              <el-menu-item index="2">字典设置</el-menu-item>
              <el-menu-item index="3">查询统计</el-menu-item>
              <el-menu-item index="4">试剂与质控</el-menu-item>
              <el-menu-item index="5">用血评估</el-menu-item>
              <el-menu-item index="6">输血与护理</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="3">
            <el-row :gutter="24">
              <el-col :span="12">
                <i class="el-icon-s-custom"></i>
                <el-link style="color:#fff" :underline="false">管理员</el-link>
              </el-col>
              <el-col :span="12">
                <el-link style="color:#fff" :underline="false">退出</el-link>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-container :style="`height:${height}px`">
        <el-aside width="210px">
          <el-menu
            :unique-opened="true"
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @select="menuSel"
            :router="true"
          >
            <template v-for="(item,i) in menuList">
              <el-submenu v-if="item.children.length > 0" :key="i" :index="item.pid">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span slot="title">{{item.menuname}}</span>
                </template>
                <el-menu-item
                  v-for="(aItem) in item.children"
                  :key="aItem.requesturl"
                  :index="aItem.requesturl"
                >{{aItem.menuname}}</el-menu-item>
              </el-submenu>
              <el-menu-item
                v-else
                :key="`${i}+${new Date().getTime()}`"
                :index="item.requesturl"
              >{{item.menuname}}</el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <el-tabs
            @tab-click="clickTab"
            v-model="editableTabsValue"
            type="card"
            closable
            @tab-remove="removeTab"
          >
            <el-tab-pane
              :closable="false"
              v-for="(item) in editableTabs"
              :key="item.id"
              :label="item.title"
              :name="item.name"
            ></el-tab-pane>
          </el-tabs>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      isCollapse: false,
      height: window.innerHeight - 60,
      menuList: [
        {
          children: [
            {
              children: [],
              menuname: "血液入库",
              pid: "6",
              requesturl: "/bloodWarehousing",
            },
            {
              children: [],
              menuname: "血液盘点",
              pid: "7",
              requesturl: "/bloodApplicationForm",
            },
            {
              children: [],
              menuname: "血袋预警",
              pid: "10",
              requesturl: "XKGL/XDYJ",
            },
          ],
          menuname: "血库管理",
          pid: "2",
          requesturl: "2",
        },
        {
          children: [
            {
              children: [],
              menuname: "输血知情同意书",
              pid: "11",
              requesturl: "SXGL/SXZQTYS",
            },
            {
              children: [],
              menuname: "输血前智能评估",
              pid: "12",
              requesturl: "SXGL/SXQZNPG",
            },
            {
              children: [],
              menuname: "输血申请",
              pid: "13",
              requesturl: "SXGL/SXSQ",
            },
          ],
          menuname: "输血管理",
          pid: "3",
          requesturl: "3",
        },
        {
          children: [],
          menuname: "统计与报表",
          pid: "4",
          requesturl: "4",
        },
        {
          children: [
            {
              children: [],
              menuname: "角色管理授权",
              pid: "24",
              requesturl: "XTGL/JSGLSQ",
            },
            {
              children: [],
              menuname: "权限资源管理",
              pid: "25",
              requesturl: "XTGL/QXZYGL",
            },
            {
              children: [],
              menuname: "菜单资源管理",
              pid: "26",
              requesturl: "XTGL/CDZYGL",
            },
            {
              children: [],
              menuname: "模块资源管理",
              pid: "27",
              requesturl: "XTGL/MKZYGL",
            },
            {
              children: [],
              menuname: "组织机构同步配置",
              pid: "28",
              requesturl: "XTGL/ZZJGTBPZ",
            },
            {
              children: [],
              menuname: "人员同步配置",
              pid: "29",
              requesturl: "XTGL/RYTBPZ",
            },
          ],
          menuname: "系统管理",
          pid: "5",
          requesturl: "5",
        },
      ],

      editableTabsValue: "0",
      editableTabs: [
        {
          title: "首页",
          name: "0",
          content: "/",
          id: new Date().getTime(),
        },
      ],
    };
  },
  methods: {
    handleSelect() {
      console.log(this.activeIndex);
    },
    //左侧菜单选择
    menuSel(key, keyPath) {
      let menuListChildren;
      let menuListPatent = this.menuList.filter(
        (item) => item.requesturl == keyPath[0]
      );
      if (menuListPatent[0].children.length > 0) {
        menuListChildren = menuListPatent[0].children.filter(
          (item) => item.requesturl == key
        )[0];
      } else {
        menuListChildren = menuListPatent[0];
      }

      if (this.editableTabs.length != 0) {
        let isMenuListChildren = this.editableTabs.findIndex(
          (item) => item.content == menuListChildren.requesturl
        );
        if (isMenuListChildren == -1) {
          this.editableTabs.push({
            title: menuListChildren.menuname,
            name: `${
              parseInt(this.editableTabs[this.editableTabs.length - 1].name) +
              parseInt(1)
            }`,
            content: menuListChildren.requesturl,
            id: new Date().getTime(),
          });
          this.editableTabsValue = `${
            this.editableTabs[this.editableTabs.length - 1].name
          }`;
        } else {
          this.editableTabsValue = `${this.editableTabs[isMenuListChildren].name}`;
        }
      }
      console.log(this.editableTabs);
      sessionStorage.setItem("menuLeft", JSON.stringify(this.editableTabs));
      this.$router.push({
        path: key,
      });
    },
    //删除选项卡
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      sessionStorage.setItem("menuLeft", JSON.stringify(this.editableTabs));
    },
    clickTab(tab, event) {
      let tabInfo = this.editableTabs.find((item) => item.title == tab.label);
      this.$router.push({
        path: tabInfo.content,
      });
    },
  },
  mounted() {
    let sessionMenu = sessionStorage.getItem("menuLeft");
    if (sessionMenu != null) {
      this.editableTabs = JSON.parse(sessionMenu);
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        let sessionMenu = sessionStorage.getItem("menuLeft");
        if (sessionMenu != null) {
          this.editableTabs = JSON.parse(sessionMenu);
        }
        let isMenuListChildren = this.editableTabs.findIndex(
          (item) => item.content == route.path
        );
        this.editableTabsValue = `${this.editableTabs[isMenuListChildren].name}`;
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
#app,
.el-container {
  height: 100%;
}
/deep/ .el-tabs__nav .el-tabs__item:nth-child(1) span {
  display: none !important;
}
.el-aside {
  border-right: 1px solid #e6e6e6;
  .el-menu {
    border: 0;
  }
}
.el-header {
  padding: 0;
  .el-row {
    margin: 0 !important;
    height: 61px;
    border-bottom: 1px solid #dcdfe6;
    background-color: rgb(84, 92, 100);
    line-height: 61px;
    color: #fff;
  }
  .el-col {
    height: 61px;
    padding: 0 !important;
  }
  .rightIco {
    padding: 0 10px;
  }
  .el-link {
    vertical-align: bottom;
  }
}
.el-main {
  padding: 20px 20px 0 20px;
}
</style>
